<script setup lang="ts">
import { useMenus } from '@/composables/useMenus'//导入响应式数据、
const { allMenus,getAllMenus,handleDelete } = useMenus()//调用后，解构得到想要的东西
getAllMenus()

// import { getAll } from '@/api/menus'
// import type { MenuItem } from '@/api/menus'
// import { ref } from 'vue'
// import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
// // 存储返回的数据
// const allMenus = ref([] as MenuItem[])

// // 获取数据的完整逻辑
// const getAllMenus = async () => {
//     const {data} = await getAll()
//     // console.log(res)
//     if(data.code==="000000"){
//         allMenus.value = data.data
//     }else{
//         ElMessage.error("获取菜单信息失败！");
//         throw new Error("获取菜单信息失败！");
//     }
// }
// const getAllMenus = async () => {
// try {
// const { data } = await getAll()
// if (data.code === '000000') {
// allMenus.value = data.data
// } else {
// ElMessage.error('获取菜单列表失败')
// throw new Error('获取菜单列表失败')
// }
// } catch (error) {
// console.log(error)
//  }
// }
// getAllMenus()
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-button type="primary" @click="router.push('/menus/create')">添加菜单</el-button>
      </div>
    </template>
    <el-table :data="allMenus" border style="width: 100%">//绑定数据
    <el-table-column prop="date" label="序号" width="180" type="index" align="center"/>
    <el-table-column prop="name" label="菜单名称" align="center"/>
    <el-table-column prop="level" label="菜单层级" width="180" align="center"/>
    <el-table-column prop="icon" label="菜单图标" align="center"/>
    <el-table-column prop="orderNum" label="排序" align="center"/>
    <el-table-column label="操作" align="center" v-slot="scope">
        <el-button type="primary" @click="router.push({ name:'menu-edit' ,params:{ id: scope.row.id } })">编辑</el-button>
        <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
    </el-table-column>
  </el-table>
  </el-card>
</template>

<style lang="scss" scoped>
.box-card{
    width: auto;
}
</style>